<template>
  <drawer :show="props.show" :show-border="false" :title="'回单要求'" @close="close" :show-close="true" :zIndex="3000">
    <view class="demand_box">
      <view
          class="demand_row"
          :class="{active:demandSelected===index}"
          v-for="(item,index) in demandList"
          @click="chooseDemand(index)"
      >
        <view class="r_name">{{item.requirename}}</view>
        <view class="r_row">
          <view class="label">定义</view>
          <view class="value">{{item.definition}}</view>
        </view>
        <view class="r_row">
          <view class="label">回单要求</view>
          <view class="value">{{item.require}}</view>
        </view>
      </view>
    </view>
    <view class="saveDemand">
      <view class="btn" @click="handleSave">
        <text>确 定</text>
      </view>
    </view>
  </drawer>
</template>

<script lang="ts" setup>
import { ref , defineProps, defineEmits,withDefaults, watch } from "vue";
import Taro from "@tarojs/taro";
import useSendGoodsStore from "@/store/sendGoods";
const props = withDefaults(
    defineProps<{
      show: boolean,
      demandList: any[]
    }>(),
    {
      show: false,
      demandList: [],
    }
)
const emit = defineEmits<{
  //(e: 'close', args: boolean)
  (e: 'close')
}>()

const sendGoodsStore = useSendGoodsStore()
const demandSelected = ref<number>(0)


const close = ()=>{
  emit('close')
}
//选择回单要求
const chooseDemand = (index)=>{
  demandSelected.value = index
}
//保存回单要求
const handleSave = ()=>{
  sendGoodsStore.clearingFormInfo.demand = props.demandList[demandSelected.value] || {}
  if(sendGoodsStore.clearingFormInfo.demand.require==='签回承运单'||sendGoodsStore.clearingFormInfo.demand.require==='承运单'){
    sendGoodsStore.billServer = '2'
    sendGoodsStore.billNum = ''
    sendGoodsStore.costList[6].m = '5'
  }
  else{
    sendGoodsStore.billServer = '3'
    sendGoodsStore.billNum = sendGoodsStore.clearingFormInfo.demand.require
    sendGoodsStore.costList[6].m = '10'
  }
  close()
}

watch(()=>props.show,(newVal)=>{
  if(newVal){
    props.demandList.forEach((item,index)=>{
      if(item.require === sendGoodsStore.clearingFormInfo.demand.require){
        demandSelected.value = index
      }
    })
  }
})

</script>

<style lang="scss">
.demand_box {
  width: 100%;
  padding: 0 24rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .demand_row {
    width: 100%;
    height: 184rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 28rpx 24rpx;
    margin-top: 16rpx;
    position: relative;
    overflow: hidden;
    &:last-child {
      margin-bottom: 16rpx;
    }
    .r_name {
      width: 100%;
      font-weight: 500;
      color: #252525;
      font-size: 28rpx;
      line-height: 40rpx;
    }
    .r_row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16rpx;
      font-size: 24rpx;
      line-height: 32rpx;
      .label { color: #666; }
      .value { color: #252525; }
    }
    &.active {
      padding: 27rpx 23rpx;
      border: 1rpx solid #0966ff;
      .r_name { color: #0966ff; }
      .r_row {
        .label { color: #0966ff; }
        .value { color: #0966ff; }
      }
      &:after {
        content: '当前已选';
        color: #fff;
        position: absolute;
        width: 104rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        right: 0;
        top: 0;
        font-size: 20rpx;
        background-color: #0966ff;
        border-radius: 0 0 0 16rpx;
      }
    }
  }
}
.saveDemand {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 32rpx 24rpx 20rpx;
  .btn {
    width: 100%;
    height: 80rpx;
    border-radius: 40rpx;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 36rpx;
      height: 36rpx;
      margin-right: 16rpx;
    }
  }
}

</style>
